<template>
  <el-breadcrumb separator-class="el-icon-arrow-right" id="my-bread-crumb-show">
    <el-breadcrumb-item v-for="(item, index) in dataList" :key="index">
      <span @click="breadCrumbClickHandler(item, index)">{{item}}</span>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
  export default {
    name: "MainBreadCrumb",
    methods: {
      breadCrumbClickHandler: function (item, index) {
        this.$emit("breadCrumbClickHandler", item, index);
      }
    },
    props: {
      dataList: {
        type: Array,
        default: function() {
          return [];
        }
      }
    }
  }
</script>

<style scoped>
  #my-bread-crumb-show {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  #my-bread-crumb-show span {
    margin-bottom: 6px;
    margin-top: 6px;
  }
</style>
